<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>

<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>服务器交互日志列表</span>
      </div>
      <!--工具栏-->
      <div class="head-container">
        <crudOperation :permission="permission"/>
      </div>
      <!--表格渲染-->
      <el-table ref="table" :data="crud.data" style="width: 100%;" v-loading="crud.loading"
                @select="crud.selectChange" @select-all="crud.selectAllChange"
                @selection-change="crud.selectionChangeHandler"
                :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
        <el-table-column v-if="columns.visible('interactType')" :show-overflow-tooltip="true"
                         prop="interactType" label="交互类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.interactType==='ca'">中心访问节点</el-tag>
            <el-tag v-if="scope.row.interactType==='ac'">节点访问中心</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('fromCode')" :show-overflow-tooltip="true" prop="fromCode"
                         label="发送端编码"/>
        <el-table-column v-if="columns.visible('fromIp')" :show-overflow-tooltip="true" prop="fromIp" label="发送IP"/>
        <el-table-column v-if="columns.visible('fromJson')" :show-overflow-tooltip="true" prop="fromJson"
                         label="发送json"/>
        <el-table-column v-if="columns.visible('reqUrl')" prop="reqUrl" :show-overflow-tooltip="true" label="请求URL"/>
        <!--<el-table-column v-if="columns.visible('toCode')" :show-overflow-tooltip="true" prop="toCode"
                         label="接收端编码"/>-->
        <el-table-column v-if="columns.visible('toIp')" prop="toIp" width="180" label="接收IP"/>
        <el-table-column v-if="columns.visible('backTs')" prop="backTs" width="180" label="返回时间"/>
        <el-table-column v-if="columns.visible('backJson')" prop="backJson" label="返回json"
                         :show-overflow-tooltip="true"/>
        <el-table-column v-if="columns.visible('reqResult')" :show-overflow-tooltip="true" prop="reqResult"
                         min-width="100"
                         label="请求结果">
          <template slot-scope="scope">
            <el-tag size="medium" v-if="scope.row.reqResult=='1'" type="success">成功</el-tag>
            <el-tag size="medium" v-if="scope.row.reqResult=='2'" type="danger">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('failReason')" :show-overflow-tooltip="true" prop="failReason"
                         label="失败原因"/>
      </el-table>
    </el-card>
    <!-- 数据备份 -->
    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="crud.backUp" title="服务器交互日志备份" width="680px">
      <el-form ref="form" :inline="true" :model="form" size="small" label-width="160px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="备份日期">
              <el-date-picker style="margin-left: 50px" v-model="backUpDate" type="date" value-format="yyyy-MM-dd"
                              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-document-delete" @click="backUpCancel()">取消</el-button>
        <el-button icon="el-icon-document-add" type="primary" @click="backUpSubmit()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import serverLog from '@/api/system/logManager'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/extend/log/CRUD.operation'
import backUp from '@/api/backUp/backUp'

const queryList = [{
  'cloumValue': 'fromIp',
  'cloumName': '发送IP'
},
  {
    'cloumValue': 'toIp',
    'cloumName': '接收IP'
  }
]

//默认去查询
const defaultCrud = CRUD({
  title: '服务交互日志',
  url: '/api/serverInteractLog/selectPages',
  sort: 'sort,asc',
  queryList: queryList,
  crudMethod: {
    ...serverLog
  }
})

const defaultForm = {}

export default {
  name: 'serverLog',
  components: { crudOperation},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['AGENT_STATUS'],
  data() {
    return {
      backUpDate: "",
      permission: {
        backUp: ['serverLog:backUp'],
      }
    }
  },
  methods: {
    backUpCancel() {
      this.crud.backUp = false
      this.backUpDate = ""
    },
    backUpSubmit() {
      var data = {
        "dateTs": this.backUpDate,
        "bitchType": "serverLog"
      }
      backUp.backUpData(data)
        .then(() => {
          this.$notify({
            title: '成功',
            message: '数据备份成功',
            type: 'success'
          });
          this.backUpDate = ""
          this.crud.backUp = false
          this.crud.query = {}
          this.crud.params = {}
          this.crud.toQuery()
        })
        .catch(() => {
          this.$notify.error({
            title: '错误',
            message: '数据备份异常'
          });
        });
    },
  }
}
</script>
